<template>
  <view class="pageContent">
    <view class="headContent">
      <view class="memberType" @click="selectHead(index)" :class="index==headIndex ? 'select' : ''"
        v-for="(item,index) in headList" :key="index">
        {{item.name}}<text v-if="item.allCount">({{item.allCount}})</text>
      </view>
    </view>
    <view v-if="appoList.length && isComplete">
      <view class="houseMain" v-for="(item,index) in appoList" :key="index">
        <view class="houseTil">
          <view>房屋信息</view>
          <view class="houseTilTim">{{item.time || '入住日期'}}</view>
        </view>
        <view class="houseNo">
          <view>{{item.roomInfo+'-'+item.roomName}}</view>
          <view class="houseMes">
            <view class="houseMesIt">{{item.name}}</view>
            <view class="houseMesIt" v-if="item.telephone">{{item.telephone}}</view>
          </view>
        </view>
        <view class="handler">
          <!-- <view class="handlerCha handlerBlu" @click.stop="detailMem(index,1)">审批详情</view> -->
          <block v-if="headIndex==0">
            <block v-if="userMsg.roleId==17">
              <view class="handlerCha handlerRed" @click.stop="approvaPut(index)">撤回</view>
              <view class="handlerCha handlerGre" @click.stop="makePhone(index)">拨打电话</view>
              <view class="handlerCha handlerBlu" @click.stop="detailMem(index,1)">详情</view>
            </block>
            <block v-else>
              <view class="handlerCha handlerBlu" @click.stop="appMem(index)">去审批</view>
            </block>
          </block>
          <block v-if="headIndex==1 || headIndex==2">
            <view class="handlerCha handlerBlu" @click.stop="detailMem(index,1)">审批详情</view>
          </block>
        </view>
      </view>
    </view>

    <view class="appEmp" v-if="!appoList.length && isComplete">
      <image class="appEmpIcon" :src="images +'/appEmpty.png'" mode="widthFix"></image>
      <view class="appEmpMsg">～还没有足迹～</view>
    </view>

  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import config from '../../../../static/config.js'
  import util from '../../../../static/utils/util.js'
  export default {
    data() {
      return {
        images: config.images,
        localImages: config.localImages,
        password: '',
        headList: [{
            value: 1,
            name: '待审批',
            allCount: 0
          },
          {
            value: 2,
            name: '已同意',
            allCount: 0
          },
          {
            value: 3,
            name: '已拒绝',
            allCount: 0
          },
        ],
        headIndex: -1,
        formData: {
          name: "",
          date: "",
          housename: "房屋1",
        },
        date: '',
        appoList: [],
        isComplete: false,
        type: '',
        userMsg: '',
      }
    },
    computed: {
      ...mapState({
        myInfo: state => state.user.myInfo
      })
    },
    onLoad(options) {
      var index = options.index ? options.index : 0;
      var type = options.type ? options.type : 0;
      this.headIndex = index;
      this.type = type;

      var userMsg = wx.getStorageSync('userMsg');
      this.userMsg = userMsg;
      //17租客，16业主
      var title = userMsg.roleId == 17 ? '我的申请' : '由我审批'
      wx.setNavigationBarTitle({
        title: title
      })
      setTimeout(() => {
        this.isComplete = true
      }, 300)

    },
    onShow() {
      var token = wx.getStorageSync('token');
      var room = wx.getStorageSync('room');
      if (token && room) {
        this.room = room;
        this.approvalList();
      }
      util.socketTest();
    },
    methods: {
      appMem(index, type = 0) {
        var id = this.appoList[index].roomApplyId
        wx.navigateTo({
          url: '/pages/subMe/appMem/main?id=' + id + '&type=' + type
        })
      },
      detailMem(index, type = 0) {
        var id = this.appoList[index].roomApplyId
        wx.navigateTo({
          url: '/pages/subMe/detailMem/main?id=' + id + '&type=' + type
        })
      },
      makePhone(index) {
        var phoneNumber = this.appoList[index].ownerTelephone
        wx.makePhoneCall({
          phoneNumber: phoneNumber
        })
      },
      approvalList() {
        var room = this.room
        var params = {
          roomId: room.roomId,
          ownerId: room.ownerId,
          projectId: room.projectId,
        }
        util.wxRequestPro('/UserServer/owner/info/approvalList', params)
          .then((res) => {
            console.warn('approvalList', res)
            var param = res.param;
            var userMsg = this.userMsg;
            //租客
            if (userMsg.roleId == 17) {
              var awaiteFilter = param.awaiteFilter.filter((item) => {
                return item.applyId == room.ownerId;
              })
              this.headList[0].allCount = awaiteFilter.length;
              awaiteFilter.map((value) => {
                value['time'] = util.getTime(value.applyTime);
                return value;
              })
              var approveFilter = param.approveFilter.filter((item) => {
                return item.applyId == room.ownerId;
              })
              this.headList[1].allCount = approveFilter.length;
              approveFilter.map((value) => {
                value['time'] = util.getTime(value.applyTime);
                return value;
              })
              var refuseFilter = param.refuseFilter.filter((item) => {
                return item.applyId == room.ownerId;
              })
              this.headList[2].allCount = refuseFilter.length;
              refuseFilter.map((value) => {
                value['time'] = util.getTime(value.applyTime);
                return value;
              })
              if (this.headIndex == 0) {
                this.appoList = awaiteFilter;
              }
              if (this.headIndex == 1) {
                this.appoList = approveFilter;
              }
              if (this.headIndex == 2) {
                this.appoList = refuseFilter;
              }
            }
            //业主
            if (userMsg.roleId == 16) {
              var awaiteFilter = param.awaiteFilter.filter((item) => {
                return item.applyId != room.ownerId;
              })
              this.headList[0].allCount = awaiteFilter.length;
              awaiteFilter.map((value) => {
                value['time'] = util.getTime(value.applyTime);
                return value;
              })
              var approveFilter = param.approveFilter.filter((item) => {
                return item.applyId != room.ownerId;
              })
              this.headList[1].allCount = approveFilter.length;
              approveFilter.map((value) => {
                value['time'] = util.getTime(value.applyTime);
                return value;
              })
              var refuseFilter = param.refuseFilter.filter((item) => {
                return item.applyId != room.ownerId;
              })
              this.headList[2].allCount = refuseFilter.length;
              refuseFilter.map((value) => {
                value['time'] = util.getTime(value.applyTime);
                return value;
              })
              if (this.headIndex == 0) {
                this.appoList = awaiteFilter;
              }
              if (this.headIndex == 1) {
                this.appoList = approveFilter;
              }
              if (this.headIndex == 2) {
                this.appoList = refuseFilter;
              }
            }

          })
      },
      approvaPut(index) {
        var item = this.appoList[index]
        //result:租客撤回传0,业主：同意传1，拒绝传2.
        var params = {
          roomApplyId: item.roomApplyId,
          processResult: 0,
        }
        var putUrl = util.stringifyQs(params);
        util.wxRequestPro('/UserServer/owner/info/approva?' + putUrl, {}, 'PUT')
          .then((res) => {
            wx.showToast({
              title: "撤回成功",
              icon: 'none'
            });
            this.approvalList();
          })
      },

      choose(e) {
        var e = e.mp
        console.warn('choose', e)
        this.date = e.detail.value
        this.formData.date = e.detail.value
      },
      selectDate() {
        console.warn("selectDate")
        wx.showToast({
          title: 'selectDate',
          icon: 'none',
          duration: 1000
        })
      },
      selectHead(index) {
        this.headIndex = index;
        this.approvalList();
      },
    }
  }
</script>

<style lang="stylus" scoped>
  .pageContent {
    height: 100vh;
    background: #F3F6F9;
    padding: 110rpx 0rpx 0rpx 0rpx;
  }

  /* 头部tab切换 */
  .headContent {
    position: fixed;
    width: 750rpx;
    top: 0rpx;
    left: 0rpx;
    display: flex;
    justify-content: space-between;
    background: #FFFFFF;
    z-index: 999;
    padding: 0rpx 30rpx 0rpx 30rpx;
  }

  .memberType {
    display: inline-block;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 6rpx;
    font-size: 32rpx;
    text-align: center;
  }

  .memberType.select {
    color: #1086FF;
    font-weight: 600;
  }

  .memberType:nth-child(n+2) {}

  .houseMain {
    background: #FFFFFF;
    padding: 0rpx 14rpx 0rpx 14rpx;
    margin: 0rpx 0rpx 20rpx 0rpx;
  }

  .houseTil {
    display: flex;
    justify-content: space-between;
    padding: 14rpx 14rpx 14rpx 14rpx;
    line-height: 45rpx;
    font-size: 32rpx;
    color: #030303;
    border-bottom: 0.3rpx solid #E7E7E7;
  }

  .houseTilTim {
    color: #666666;
  }

  .houseNo {
    padding: 14rpx 14rpx 14rpx 14rpx;
    font-size: 30rpx;
    color: #030303;
    border-bottom: 0.3rpx solid #E7E7E7;
  }

  .houseMes {
    display: flex;
    padding: 14rpx 0rpx 14rpx 0rpx;
  }

  .houseMesIt {
    line-height: 36rpx;
    background: #F2F8FF;
    border-radius: 6rpx;
    border: 1px solid #BCDEFF;
    color: #519AEE;
    font-size: 24rpx;
    margin-right: 10rpx;
    padding: 0rpx 14rpx 0rpx 14rpx;
  }

  .handler {
    display: flex;
    justify-content: flex-end;
    padding: 14rpx 14rpx 20rpx 14rpx;
    width: 100%;
  }

  .handlerCha {
    height: 60rpx;
    width: 160rpx;
    line-height: 60rpx;
    background: #DDDDDD;
    border-radius: 30rpx;
    color: #FFFFFF;
    text-align: center;
    font-weight: bold;
  }

  .handlerBlu {
    background: #1086FF;
    margin-left: 18rpx;
  }

  .handlerGre {
    background: #05C15F;
    margin-left: 18rpx;
  }

  .handlerRed {
    background: #FF635D;
    margin-left: 18rpx;
  }

  .btOne {
    margin: 40rpx 0rpx 0rpx 0rpx;
  }

  .appEmp {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    background: #fff;
    margin: -110rpx 0rpx 0rpx 0rpx;
    padding: 210rpx 0rpx 0rpx 0rpx;
  }

  .appEmpIcon {
    width: 670rpx;
    height: 730rpx;
  }

  .appEmpMsg {
    color: #A8AFB6;
    font-size: 36rpx;
    margin: -183rpx 0rpx 0rpx 0rpx;
  }
</style>
